<script setup>
import { findTestData } from '@/api/dashboard';
import * as echarts from 'echarts';
import { ref, onMounted, computed } from 'vue'


const chartRef = ref();
const props = defineProps(['correctNumber','MisTakeNumber'])  
// const props = defineProps(['value', 'name'])
console.log(props);

const stati = computed(() => {
  const arr = []
  arr.push({
    value: props.correctNumber,
    name: 'correctNumber'
  })

  arr.push({
    value: props.MisTakeNumber,
    name: 'MisTakeNumber'
  })

  return arr
})

console.log(stati);

onMounted(() => {
  //获取试卷的数据
  console.log(props.correctNumber);
  console.log(props.MisTakeNumber);


  var myChart = echarts.init(chartRef.value)

  var option = {
    title: {
      text: '错题与得分题的比例',
      subtext: 'NEW DATA',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    }, toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data:
          [
            ...stati.value
            // { value: 1048, name: 'Search Engine' },
            // { value: 735, name: 'Direct' },
            // { value: 580, name: 'Email' },
            // { value: 484, name: 'Union Ads' },
            // { value: 300, name: 'Video Ads' }
          ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  myChart.setOption(option);

})
</script>
<template>
  <div ref="chartRef" style="height: 450px;width:450px;margin-left: -1px;"></div>
</template>
 
<style scoped></style>